<template>
  <basic-dialog
      :loading="dialog.loading"
      :modelValue="dialog.showDialog"
      :title="dialog.title"
      :visible="dialog.showDialog"
      append-to-body
      width="900"
      @cancel="cancelDialog"
      @submit="handleSubmit"
  >
    <!-- 使用新的基础组件 -->
    <basic-crud
        ref="crudRef"
        :apiListParams="apiListParams"
        :option="tableOption"
        apiGetListMethod="post"
        apiGetListUrl="/mpm/processSpecificationController/listReplace"
        selectType="radio"
        @row-click="handleRowClick"
        @search-change="handleSearch"
        @search-reset="handleReset"
        @sort-change="handleSort"
    >
      <!-- 状态字段需要在基础组件外部处理 -->
      <template #radio="scope">
        <el-radio v-model="rowIndex" :label="scope.row.$index">
          &nbsp;
        </el-radio>
      </template>
    </basic-crud>
  </basic-dialog>
</template>

<script setup>
import {
  putWorkOrderTargetById,
  getTechnologyList,
  postWorkOrderTargetById,
  getListReplace
} from "../../../apis/generate/productionPlan";

const emit = defineEmits(['refresh'])
const dialog = reactive({
  showDialog: false,
  title: '选择规程',
  loading: false
});
const paramsForm = ref({});
const crudRef = ref(null);
const tableOption = reactive({
  addBtn: false,
  menu: false,
  editBtn: false,
  delBtn: false,
  height: '300px',
  headerAlign: 'left',
  align: 'left',
  border: false,
  searchMenuSpan: 6,
  column: [
    {
      label: '规程编号',
      prop: 'code',
      search: true,
      searchSpan: 8,
      sortable: true
    },
    {
      label: '规程名称',
      prop: 'name',
      search: true,
      searchSpan: 8
    },
    {
      label: '规程版本',
      prop: 'rev'
    }
  ]
});
// 打开对话框
const openDialog = (params) => {
  console.log(params);
  dialog.showDialog = true
  paramsForm.value = params
}

const apiListParams = computed(() => {
  return {
    productCode: paramsForm.value.productCode,
    id: paramsForm.value.targetId
  }
});

const handleSubmit = () => {
  let form = {};
  form.id = paramsForm.value.workOrderId;
  form.primaryTargetId = paramsForm.value.primaryTargetId;
  postWorkOrderTargetById(form)
      .then((res) => {
        ElMessage.success("设置规程成功！");
        cancelDialog();
        this.$emit("refresh");
      })
      .catch(() => this.$message.error("服务异常，请联系管理员"));
};

const handleSort = (val) => {
  const ordermethod = val.order === 'descending' ? 'desc' : 'asc'
  apiListParams.value = {
    ...apiListParams.value,
    orderBy: val.prop,
    orderMethod: ordermethod
  };

}
const handleRefresh = () => {
  crudRef.value.getList();
}
const cancelDialog = () => {
  dialog.showDialog = false;
}
defineExpose({
  openDialog
})

</script>

<style lang="scss" scoped>

</style>
